<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—库存清单"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="物品编码" v-model="no"></LInput>
      <LInput label="物品名称" v-model="name"></LInput>
      <LSelect label="物品类别" :value="type" :options="option1" @selected-event="getNewSelected1" style="margin-left: 16px"></LSelect>
      <LSelect label="仓库" :value="ware" :options="option2" @selected-event="getNewSelected2" style="margin-left: 16px"></LSelect>
      <LSelect label="库区" :value="kuqu" :options="option3" @selected-event="getNewSelected3" style="margin-left: 16px" placeholder="请选择"></LSelect>
    </section>
    <section class="search_bar">
      <LSelect label="库存是否大于0" :value="kucun" :options="option4" @selected-event="getNewSelected4"></LSelect>
      <LButton label="查询数据" style="margin-left: 16px"></LButton>
      <LButton label="重置条件" style="margin-left: 16px" @click="clearSelected"></LButton>
      <LButton label="导出数据" style="margin-left: 16px" @click="exportExcel"></LButton>
    </section>
    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="全部">
        <el-table :data="tableData1" style="width: 100%" show-summary :summary-method="getSummaries" border :default-sort='{prop:"b",order:"ascending"}'>
          <el-table-column prop="a" label="类别" />
          <el-table-column prop="b" label="物品编号" />
          <el-table-column prop="c" label="物品名称" />
          <el-table-column prop="d" label="品牌" />
          <el-table-column prop="e" label="规格" />
          <el-table-column prop="f" label="物品序列号" />
          <el-table-column prop="g" label="是否耐用" />
          <el-table-column prop="h" label="仓库" />
          <el-table-column prop="i" label="库区" />
          <el-table-column prop="k" label="库存数" sortable />
          <el-table-column prop="l" label="单价" sortable />
          <el-table-column prop="m" label="金额" sortable />
          <el-table-column prop="n" label="品质" />
          <el-table-column prop="o" label="预警下限" />
          <el-table-column prop="p" label="预警上限" />
          <el-table-column label="操作" width="140">
            <!-- <template #default>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
            </template> -->
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="低于预警">
        <el-table :data="tableData1" style="width: 100%" show-summary :summary-method="getSummaries" border :default-sort='{prop:"b",order:"ascending"}'>
          <el-table-column prop="a" label="类别" />
          <el-table-column prop="b" label="物品编号" />
          <el-table-column prop="c" label="物品名称" />
          <el-table-column prop="d" label="品牌" />
          <el-table-column prop="e" label="规格" />
          <el-table-column prop="f" label="物品序列号" />
          <el-table-column prop="g" label="是否耐用" />
          <el-table-column prop="h" label="仓库" />
          <el-table-column prop="i" label="库区" />
          <el-table-column prop="k" label="库存数" sortable />
          <el-table-column prop="l" label="单价" sortable />
          <el-table-column prop="m" label="金额" sortable />
          <el-table-column prop="n" label="品质" />
          <el-table-column prop="o" label="预警下限" />
          <el-table-column prop="p" label="预警上限" />
          <el-table-column label="操作" width="140">
            <!-- <template #default>
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template> -->
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="高于预警">
        <el-table :data="tableData1" style="width: 100%" show-summary :summary-method="getSummaries" border :default-sort='{prop:"b",order:"ascending"}'>
          <el-table-column prop="a" label="类别" />
          <el-table-column prop="b" label="物品编号" />
          <el-table-column prop="c" label="物品名称" />
          <el-table-column prop="d" label="品牌" />
          <el-table-column prop="e" label="规格" />
          <el-table-column prop="f" label="物品序列号" />
          <el-table-column prop="g" label="是否耐用" />
          <el-table-column prop="h" label="仓库" />
          <el-table-column prop="i" label="库区" />
          <el-table-column prop="k" label="库存数" sortable />
          <el-table-column prop="l" label="单价" sortable />
          <el-table-column prop="m" label="金额" sortable />
          <el-table-column prop="n" label="品质" />
          <el-table-column prop="o" label="预警下限" />
          <el-table-column prop="p" label="预警上限" />
          <el-table-column label="操作" width="140">
            <!-- <template #default>
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template> -->
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="正常">
        <el-table :data="tableData1" style="width: 100%" show-summary :summary-method="getSummaries" border :default-sort='{prop:"b",order:"ascending"}'>
          <el-table-column prop="a" label="类别" />
          <el-table-column prop="b" label="物品编号" />
          <el-table-column prop="c" label="物品名称" />
          <el-table-column prop="d" label="品牌" />
          <el-table-column prop="e" label="规格" />
          <el-table-column prop="f" label="物品序列号" />
          <el-table-column prop="g" label="是否耐用" />
          <el-table-column prop="h" label="仓库" />
          <el-table-column prop="i" label="库区" />
          <el-table-column prop="k" label="库存数" sortable />
          <el-table-column prop="l" label="单价" sortable />
          <el-table-column prop="m" label="金额" sortable />
          <el-table-column prop="n" label="品质" />
          <el-table-column prop="o" label="预警下限" />
          <el-table-column prop="p" label="预警上限" />
          <el-table-column label="操作" width="140">
            <!-- <template #default>
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template> -->
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Header from '@/components/Header'
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LButton from "../../../components/LButton.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LSelect from "@/components/LSelect.vue";
import CsvExportor from "csv-exportor"; //导出csv

export default {
  components: {
    Header,
    LInput,
    LButton,
    LDateTimeSelect2,
    LSelect,
  },
  data() {
    return {
      no: "",
      time: [],
      type: "1",
      ware: "1",
      kuqu: "",
      kucun: "1",

      option1: [
        { label: "全部", value: "1" },
        { label: "XXX", value: "2" },
      ],
      option2: [{ label: "仓库", value: "1" }],
      option3: [
        { label: "库区", value: "1" },
        { label: "库区2", value: "2" },
      ],
      option4: [
        { label: "是", value: "1" },
        { label: "否", value: "2" },
      ],

      tableData1: [
        {
          a: "类别",
          b: "03",
          c: "名称",
          d: "品牌",
          e: "AASASDDF",
          f: "SN35453466",
          g: "是",
          h: "仓库",
          i: "库区",
          k: "100",
          l: "2.50",
          m: "25",
          n: "优",
          o: "100",
          p: "500",
        },
        {
          a: "类别",
          b: "01",
          c: "名称",
          d: "品牌",
          e: "AASASDDF",
          f: "SN35453466",
          g: "是",
          h: "仓库",
          i: "库区",
          k: "100",
          l: "2.50",
          m: "25",
          n: "优",
          o: "100",
          p: "500",
        },
      ],
    };
  },
  mounted() {
  
  },
  beforeUnmount() {

  },
  methods: {
    //下拉框获取物品类别
    getNewSelected1(s) {
      this.type = s;
    },
    //下拉框获取仓库
    getNewSelected2(s) {
      this.ware = s;
    },
    //下拉框获取领用科室(库区)
    getNewSelected3(s) {
      this.kuqu = s;
    },
    //下拉框获取库存>0 子传父
    getNewSelected4(s) {
      this.kucun = s;
    },
    //重置条件
    clearSelected() {
      this.no = "";
      this.name = "";
      this.type = "1";
      this.ware = "1";
      this.kuqu = "";
      this.kucun = "1";
    },
    //导出
    exportExcel() {
      console.log("导出数据按钮点击~~~");
      let tableData = this.tableData1;
      let header = [
        "类别",
        "物品编号",
        "物品名称",
        "品牌",
        "规格",
        "物品序列号",
        "是否耐用",
        "仓库",
        "库区",
        "库存数",
        "单价",
        "金额",
        "品质",
        "预警下限",
        "预警上限",
      ];
      CsvExportor.downloadCsv(tableData, { header }, "库存清单.xls");
      console.log("导出数据按钮点击结束~~~");
    },
    //自定义表格合计
    getSummaries(param) {
      const { columns, data } = param;
      console.log("+++", columns, data);
      console.log("---", data);
      const sums = [];
      columns.forEach((column, index) => {
        switch (index) {
          case 0:
            sums[index] = "合计";
            return;
          case 1:
            sums[index] = "";
            return;
          case 2:
            sums[index] = "";
            return;
          case 3:
            sums[index] = "";
            return;
          case 4:
            sums[index] = "";
            return;
          case 5:
            sums[index] = "";
            return;
          case 6:
            sums[index] = "";
            return;
          case 7:
            sums[index] = "";
            return;
          case 8:
            sums[index] = "";
            return;
          case 12:
            sums[index] = "";
            return;
          case 13:
            sums[index] = "";
            return;
          case 14:
            sums[index] = "";
            return;
          case 15:
            sums[index] = "";
            return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row {
  border: 1px solid RGBA(255, 255, 255, 1);
  padding: 3vh 0 0 0;
  position: relative;

  &:last-child {
    margin-top: 5vh;
  }

  .row-title {
    text-align: center;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: RGBA(255, 255, 255, 1);
    position: absolute;
    left: 1vw;
    top: -1.6vh;
  }

  .row-text {
    display: inline-block;
    width: 250px;
    color: red;
    position: absolute;
    margin-left: 2vw;
  }

  .row-1 {
    display: flex;
    justify-content: space-between;
    padding: 0 2vw 0 0;
  }
}

// 表格内图片样式
/deep/ .el-form {
  img {
    position: absolute;
    margin-left: 0.2vw;
    margin-top: 0.5vh;
  }
}
</style>
